/**
 * Created by sfr on 2017/10/10.
 */
import React from "react";
import {connect} from "dva";
import { createForm } from 'rc-form';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import {ImagePicker, Button, TextareaItem, WhiteSpace, DatePicker, List ,InputItem,Toast} from "antd-mobile";
import styles from './workAdd.less';
const empty = require('is-empty');

import FileUploadItem from '../../../../components/WitFileUpload/index'


class WorkAdd extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      files: [],//附件信息

    };
  }

  //==组件所有函数
  上传图片
  // onChange = (files, type, index) => {
  //   console.log(files, type, index);
  //   this.setState({
  //     files,
  //   });
  // }
  //开始时间改变
  startTimieOnChange = (date) => {
    console.log('onChange', date);
    this.setState({
      startTime: date
    });
  }
  //结束时间改变
  endTimieOnChange = (date) => {
    console.log('onChange', date);
    this.setState({
      endTime: date
    });
  }

  //表单验证
  validate = (rule, value, callback) => {
    if (value && value.length > 0) {
      callback();
    } else {
      callback(new Error('此项必填'));
    }
  };
  submit = () => {
    this.props.form.validateFields((error, value) => {
      if(error && error.art_title) {
        Toast.fail(error.art_title.errors[0].message, 1);
        return;
      }
      if(error && error.art_content) {
        Toast.fail(error.art_content.errors[0].message, 1);
        return;
      }
      // if(error && error.begin_time) {
      //   Toast.fail(error.begin_time.errors[0].message, 1);
      //   return;
      // }
      // if(error && error.end_time) {
      //   Toast.fail(error.end_time.errors[0].message, 1);
      //   return;
      // }
      value['begin_time']=value['begin_time'].format('YYYY-MM-DD');
      value['end_time']=value['end_time'].format('YYYY-MM-DD');
      const img_file=this.state.files
      value['img_file']=img_file
      console.log(img_file,'ffffffffffffffffff')

      console.log(value,'vvvvvvvvvvvvvvvvvvvv')
      this.props.dispatch({
        type: 'workLog/insertWork',
        payload: value
      })
    });
  };

  //附件信息
  getFiles = (value) => {
  console.log(value,'vvvvvvvvvaaaaaaaaaaaaaaavvvvvvvvvvvaaaaaaaaaa')
    this.setState({
      files: JSON.stringify(value)
    });
  };
  //==生命周期--页面渲染
  render() {
    const { files } = this.state;
    const { getFieldProps } = this.props.form;
    // console.log(getFieldProps,'getFieldProps')
    return (
      <div className='workAdd' style={{backgroundColor: '#eee'}}>
        <div>
        <WhiteSpace />
        <WhiteSpace />
        <TextareaItem
          {...getFieldProps('art_title', {
            rules: [
              { required: true, message: '请输入工作标题'},
              { validator: this.validate },
            ]
          })}
          title="工作标题"
          placeholder="请输入工作标题"
          data-seed="logId"
          autoHeight
        />
        <WhiteSpace />
        <div className={styles.workDeatil}>工作详情</div>
        <TextareaItem
          {...getFieldProps('art_content', {
            rules: [
              { required: true, message: '请输入工作详情的内容'},
              { validator: this.validate },
            ]
          })}
          autoHeight
          placeholder="请输入工作详情的内容"
          labelNumber={5}
          style={{padding: '0 0.3rem'}}
        />
        {/*<div className={styles.imgeUploader}>*/}
          {/*<ImagePicker*/}
            {/*files={files}*/}
            {/*onChange={this.onChange}*/}
            {/*onImageClick={(index, fs) => console.log(index, fs)}*/}
            {/*selectable={files.length < 9}*/}
          {/*/>*/}
        {/*</div>*/}
        <FileUploadItem
          files={this.getFiles}
          url="/api/common/upload"
        />
        <WhiteSpace />
        <List>
          <DatePicker
            mode="date"
            title="选择开始时间"
            {...getFieldProps('begin_time', {
              rules: [
                { required: true, message: '选择开始时间'},
                { validator: this.validate },
              ]
            })}>
            <List.Item arrow="horizontal">开始时间</List.Item>
          </DatePicker>
          <DatePicker
            mode="date"
            title="选择结束时间"
            {...getFieldProps('end_time', {
              rules: [
                { required: true, message: '选择结束时间'},
                { validator: this.validate },
              ]
            })}>
            <List.Item arrow="horizontal">结束时间</List.Item>
          </DatePicker>
        </List>
        <WhiteSpace />
        <WhiteSpace />
        <WhiteSpace />
        <WhiteSpace />
        <WhiteSpace />
        <WhiteSpace />
        <div className={styles.addBtn}>
          <Button onClick={()=>this.submit()}>提交</Button>
        </div>
        <WhiteSpace />
        <WhiteSpace />
        </div>
      </div>
    );
	}

}

function mapStateToProps({ infor,workLog }){
  return {
    infor,
    workLog
	};
}

const Wrapper = createForm()(WorkAdd);

export default connect(mapStateToProps)(Wrapper);
